import React, { Component } from "react";
import globalContext from "../context";
import A from "./A";
import B from "./B";

class Child extends Component {
  getContext(value) {
    return (
      <div>
        <h3>Child:接收的数据3</h3>
        <p>userName:{value.userName}</p>
        <p>age:{value.age}</p>
      </div>
    );
  }
  render() {
    const { Consumer } = globalContext;
    return (
      <div>
        <globalContext.Consumer>
          {(value) => {
            console.log(value);
            return (
              <div>
                <h3>Child:接收的数据1</h3>
                <p>userName:{value.userName}</p>
                <p>age:{value.age}</p>
              </div>
            );
          }}
        </globalContext.Consumer>
        <hr />
        <Consumer>
          {({ userName, age }) => {
            return (
              <div>
                <h3>Child:接收的数据2</h3>
                <p>userName:{userName}</p>
                <p>userName:{age}</p>
              </div>
            );
          }}
        </Consumer>
        <hr />
        <Consumer>{this.getContext}</Consumer>
        <A />
        <B />
      </div>
    );
  }
}
export default Child;
